<template>
    <div class="s-box">
      <p>收货人信息</p>
      <div class="s-fot">
        <div class="s-d1">
          <span>*<span>收货人姓名 ：</span></span>
          <input v-model="usernam" type="text" placeholder="收货人姓名">
        </div>
        <div class="s-d2">
          <span>*<span>所在地区 ：</span></span>
          <Zicity2 v-model="cityInfo" class="select-city" @input="chooseAddress"></Zicity2>
        </div>
        <div class="s-d3">
          <span>*<span>详细地址 ：</span></span>
          <input v-model="addss" type="text" placeholder="用于接收货物的详细地址">
        </div>
        <div class="s-d4">
          <span>*<span>联系电话 ：</span></span>
          <input v-model="pone3" type="number" placeholder="您的手机号">
        </div>
        <router-link to="/shouhuo2/2">
          <button @click="btn()">确认并设为默认地址</button>
        </router-link>
      </div>
    </div>
</template>

<script>
  import Zicity2 from './Zicity2'
    export default {
      name: "Shouhuo1",
      components:{
        Zicity2
      },
      data(){
        return {
          usernam:'',
          cityInfo:{
            province:'河南省',
            city:'郑州市',
            block:'高新区'
          },
          addss:'',
          pone3:''
        }
      },
      methods:{
        // info 为子组件传递过来的参数
        chooseAddress (info) {
          console.log('info', info)
          this.cityInfo = info
        },
        btn(){
          this.$store.commit('cunjin1',this.usernam);
          this.$store.commit('cunjin2',this.cityName);
          this.$store.commit('cunjin3',this.addss);
          this.$store.commit('cunjin4',this.pone3);
        }
      },
      computed: {
        //cityName 为选择的省市区名称
        cityName() {
          const names = [];
          this.cityInfo.province && (this.cityInfo.province.name!=undefined&&names.push(this.cityInfo.province.name + ' '));
          this.cityInfo.city && (this.cityInfo.city.name!=undefined&&names.push(this.cityInfo.city.name + ' '));
          this.cityInfo.block && (this.cityInfo.block.name!=undefined&&names.push(this.cityInfo.block.name + ' '));
          return names.join('');
        }
      }
    }
</script>

<style scoped>
  .s-box{
    width: 1280px;
    margin: auto;
  }
  .s-box p{
    padding: 20px 0;
    font-size: 18px;
    border-bottom: 1px solid #e9e9e9;
  }
  .s-fot{
    padding-bottom: 20px;
    border-bottom: 1px solid #e9e9e9;
  }
  .s-fot>div{
    margin-top: 20px;
  }
  .s-fot>div>span{
    display: inline-block;
    width: 127px;
    text-align: right;
    font-size: 18px;
    color: #f08200;
  }
  .s-fot>div span span{
    color: #333;
    margin-left: 5px;
  }
  .s-fot .s-d1 input{
    width: 320px;
    padding-left: 10px;
    font-size: 16px;
    height: 35px;
    border: 1px solid #999;
    margin-left: 20px;
  }
  .s-fot .s-d2{
    display: flex;
  }
  .s-fot .s-d3 input{
    width: 460px;
    height: 35px;
    padding-left: 10px;
    font-size: 16px;
    border: 1px solid #999;
    margin-left: 20px;
  }
  .s-fot .s-d4 input{
    width: 460px;
    height: 35px;
    padding-left: 10px;
    font-size: 16px;
    border: 1px solid #999;
    margin-left: 20px;
  }
  .s-fot button{
    width: 205px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    background: #f08200;
    border-radius: 5px;
    margin: 20px 0 0 147px;
  }
</style>
